import React from "react";
import { Link } from "react-router-dom";
import "./PlayList.scss";
import { PlayCircleOutlined } from "@ant-design/icons";

export default function MusicList(props) {
  const {
    value,
    params
  } = props;
  return (
    <>
      {/* 歌曲列表区域 */}
      <div id="PLBody">
        <div className="songsTitle" draggable="true">
          歌曲列表
        </div>
        <div className="songsList">
          {value &&
            value.map((item, index) => {
              return (
                <Link className="hotSingle" to={`/song?id=${params}`} key={item.id}>
                  <div className="number">{index + 1}</div>
                  <div className="name">
                    <div className="music">{item.name}</div>
                    <div className="singer">
                      <div className="album">
                        {`${item.ar[0].name}-${item.al.name}`}
                      </div>
                    </div>
                  </div>
                  <div className="playIcon">
                    <PlayCircleOutlined />
                  </div>
                </Link>
              );
            })}
        </div>
      </div>
    </>
  );
}
